<template>
    <div class="row">
        <div class="col-4">
            <a v-for="item in data" :key="item.id" class="mt-2"
                :class="[item.isActive ? 'active' : '', item.isShow ? 'disabled' : '']" @click="handler(item.id, item.path)">
                <span :class="item.icon" class="item"></span>
                <span class="mx-2">{{ item.label }}</span>
                <br></a>
        </div>
        <div class="col-8">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
import { nanoid } from 'nanoid';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter()

const data = reactive([
    {
        id: nanoid(5),
        label: 'Navigator One',
        isActive: true,
        isShow: false,
        path: '/',
        icon: 'fas fa-map-marker-alt'
    },
    {
        id: nanoid(5),
        label: 'Navigator Two',
        isActive: false,
        isShow: false,
        path: '/Nav2',
        icon: 'fas fa-grip-horizontal'
    },
    {
        id: nanoid(5),
        label: 'Navigator Three',
        isActive: false,
        isShow: true,
        path: '/Nav3',
        icon: 'fas fa-calendar-alt'
    },
    {
        id: nanoid(5),
        label: 'Navigator Four',
        isActive: false,
        isShow: false,
        path: '/Nav4',
        icon: 'fas fa-cog'
    },
])


const handler = (id, path) => {
    data.find(item => { item.isActive = item.id == id })
    router.push({ path: path })
}

</script>

<style  scoped>
.active {
    color: blue;
}

.disabled {
    color: #D4D4D4;
    pointer-events: none;
    background-color: white;
}

a {
    color: black;
    text-decoration: none;
}
</style>